import React, {useEffect, useState} from 'react';
import './index.css'
import icon from './image/icon.svg'
import http from "../../../util/http";
import {useNavigate} from "react-router-dom";
import {Divider} from 'antd'
import {useAppContext} from "../../../App";
import {getTermTranslation} from "../../../util/language";

function News(props) {
    let navigate = useNavigate();
    const {selectTab, setSelectTab, selectLanguage, setSelectLanguage} = useAppContext();
    const customStyle = selectLanguage === 'en' ? {fontSize: '15px'} : {};
    const [data, setData] = useState({
        tab1: [],
        tab2: []
    });
    const [tab, setTab] = useState("总院动态")
    useEffect(() => {
        const zy = http.doPost('/doc/getdoc', {category: "256,402", pageNum: 1, pageSize: 10});
        const yw = http.doPost('/doc/getdoc', {category: "257,403", pageNum: 1, pageSize: 10});
        http.doAll([zy, yw]).then(res => {
            setData({
                tab1: res[0].status === 200 ? res[0].data.list : [],
                tab2: res[1].status === 200 ? res[1].data.list : []
            })
        })


    }, [])

    // Ensure selectTab is valid on mount
    useEffect(() => {
        if (!['总院动态', '水利要闻'].includes(selectTab)) {
            setSelectTab('总院动态');
        }
    }, [selectTab, setSelectTab]);

    let newData = selectTab === '总院动态' ? data.tab1 : data.tab2;
    // if (selectTab === '总院动态') {
    //     newData = data['tab1'] || []
    // } else if (selectTab === '水利要闻') {
    //     newData = data['tab2'] || []
    // }

    function openUrl(docId) {
        if (docId && docId !== "") {
            const homeRouter = []
            if (selectTab == ''){
                homeRouter.push('新闻中心','总院动态')
            }else {
                homeRouter.push('新闻中心','水利要闻')
            }


            navigate('/portal/details', {
                state: {
                    docId,
                    page: "home",
                    text: "",
                    docType: selectTab,
                    homeRouter: homeRouter
                }
            });
        }
    }

    return (
        <div className="news-main">
            <div className="news-tab">
                <div style={customStyle} className={`news-tab-one tab1 ${selectTab === "总院动态" ? "active" : ""}`} 
                     onMouseOver={() => setSelectTab("总院动态")}>
                    {getTermTranslation(selectLanguage, '总院动态')}
                </div>
                {/*<div className="news-tab-separated"/>*/}
                <div style={customStyle} className={`news-tab-one tab2 ${selectTab === "水利要闻" ? "active" : ""}`} 
                     onMouseOver={() => setSelectTab("水利要闻")}>
                    {getTermTranslation(selectLanguage, '水利要闻')}
                </div>
            </div>
            <div className="news-table">
                {
                    newData && newData.map((item, index) => {
                        // if (index === 4) {
                        //     return (
                        //         <div key={item.id}>
                        //             <div className="news-table-one" onClick={() => openUrl(item.id)}>
                        //                 <div className="news-table-one-icon">
                        //                     <img src={icon} alt="图标"/>
                        //                 </div>
                        //                 <div className="news-table-one-title"
                        //                      title={item.docSubject}>{item.docSubject}</div>
                        //                 <div className="news-table-one-time"
                        //                      title={item.docCreateDate}>{item.docCreateDate}</div>
                        //             </div>
                        //             <hr style={{marginBottom: '10px'}}/>
                        //         </div>
                        //     )
                        // }
                        return (
                            <div key={item.id}>
                                <div className="news-table-one"
                                     onClick={() => openUrl(item.id)}>
                                    <div className="news-table-one-title-wrapper">
                                        <div className="news-table-one-icon">
                                            <img src={icon} alt="图标"/>
                                        </div>
                                        <div className="news-table-one-title"
                                             title={item.docSubject}>{item.docSubject}
                                        </div>
                                    </div>

                                    <div className="news-table-one-time"
                                         title={item.docCreateDate}>{item.docCreateDate}</div>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default News;